<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body {
				font-family: "Helvetica", "Arial", serif;
				color: #333;
				background-color: #ccc;
				margin: 1em 10%;
			}
			
			h1 {
				color: #333;
				background-color: transparent;
			}
			
			a {
				color: #c60;
				background-color: transparent;
				font-weight: bold;
				text-decoration: none;
			}
			
			ul {
				padding: 0;
			}
			
			li {
				float: left;
				padding: 1em;
				list-style: none;
			}
			
			#imagegallery {
				list-style: none;
			}
			
			#imagegallery li {
				margin: 0px 20px 20px 0px;
				padding: 0px;
				display: inline;
			}
			
			#imagegallery li a img {
				border: 0;
			}
		</style>
	</head>

	<body>
		<h2>
    美女画廊
</h2>

		<ul id="imagegallery">
			<li>
				<a href="images/1.jpg" title="美女A">
					<img src="images/1-small.jpg" width="100" alt="美女1" />
				</a>
			</li>
			<li>
				<a href="images/2.jpg" title="美女B">
					<img src="images/2-small.jpg" width="100" alt="美女2" />
				</a>
			</li>
			<li>
				<a href="images/3.jpg" title="美女C">
					<img src="images/3-small.jpg" width="100" alt="美女3" />
				</a>
			</li>
			<li>
				<a href="images/4.jpg" title="美女D">
					<img src="images/4-small.jpg" width="100" alt="美女4" />
				</a>
			</li>
		</ul>

		<div style="clear:both"></div>

		<img id="image" src="images/1.jpg" alt="" width="450px" />

		<p id="des">选择一个图片</p>

		<script type="text/javascript">
			var imagegallery = document.getElementById("imagegallery");
			var gallerys = imagegallery.getElementsByTagName('a');
			var img = document.getElementById("image");
			var des = document.getElementById("des");
			for(i = 0; i < gallerys.length; i++) {
				gallerys[i].onclick = function() {
					img.src = this.href;
					des.innerHTML = this.title;
					return false;//阻止默认跳转，只在onclick事件下起作用
				}
			}
		</script>
	</body>

</html>